<script setup lang="ts">
import ProjectInfo from '../../../components/ProjectDetail/ProjectInfo.vue'
import MilestoneList from '../../../components/Project/MilestoneList.vue'
import type { MilestoneType } from '../../../components/Project/MilestoneList.vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import type { CollapseModelValue } from 'element-plus'
import type { TabsPaneContext } from 'element-plus'
import VersionDetail from '../../../components/ProjectDetail/VersionDetail.vue'
// import VersionDocument from '../../../components/ProjectDetail/VersionDocument.vue'
// import RoleResponsibilities from '../../../components/ProjectDetail/RoleResponsibilities.vue'
// import { CirclePlus } from '@element-plus/icons-vue'
// import HeaderTitle from '../../../components/common/HeaderTitle.vue'
// import RoleResponsibilities from '../../../components/ProjectDetail/RoleResponsibilities.vue'

const router = useRouter()
const versionList: MilestoneType[] = [
  // {
  //   id: '01',
  //   number: '',
  //   createTime: '',
  //   releaseTime: ''
  // }
]
const addMilestoneNode = () => {
  router.push('/create-milestone')
}

const activeName = ref('1')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const personTableData = [
  {
    key: '5',
    personName: '陶荣徽',
    appointmentDate: '2025/02/17 15:05:56',
    exitTime: '2025/02/17 15:05:56',
    contact: '13385980958',
    post: '技术总监',
    status: '在职'
  },
  {
    key: '4',
    personName: '陶荣徽',
    appointmentDate: '2025/02/17 15:05:56',
    exitTime: '2025/02/17 15:05:56',
    contact: '13385980958',
    post: '技术总监',
    status: '其他项目'
  },
  {
    key: '3',
    personName: '陶荣徽',
    appointmentDate: '2025/02/17 15:05:56',
    exitTime: '2025/02/17 15:05:56',
    contact: '13385980958',
    post: '技术总监',
    status: '其他项目'
  },
  {
    key: '2',
    personName: '陶荣徽',
    appointmentDate: '2025/02/17 15:05:56',
    exitTime: '2025/02/17 15:05:56',
    contact: '13385980958',
    post: '技术总监',
    status: '其他项目'
  },
  {
    key: '1',
    personName: '陶荣徽',
    appointmentDate: '2025/02/17 15:05:56',
    exitTime: '2025/02/17 15:05:56',
    contact: '13385980958',
    post: '技术总监',
    status: '离职'
  }
]
const tableData = [
  {
    key: '5',
    updateTime: '2016-05-03',
    fileName: 'Tom',
    updaterName: 'No. 189, Grove St, Los Angeles',
    version: '1.1.5'
  },
  {
    key: '4',
    updateTime: '2016-05-03',
    fileName: 'Tom',
    updaterName: 'No. 189, Grove St, Los Angeles',
    version: '1.1.4'
  },
  {
    key: '3',
    updateTime: '2016-05-03',
    fileName: 'Tom',
    updaterName: 'No. 189, Grove St, Los Angeles',
    version: '1.1.3'
  },
  {
    key: '2',
    updateTime: '2016-05-03',
    fileName: 'Tom',
    updaterName: 'No. 189, Grove St, Los Angeles',
    version: '1.1.2'
  },
  {
    key: '1',
    updateTime: '2016-05-03',
    fileName: 'Tom',
    updaterName: 'No. 189, Grove St, Los Angeles',
    version: '1.1.1'
  }
]

const activeNames = ref(['1'])
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}
</script>

<template>
  <div class="project-detail">
    <ProjectInfo class="project-info" />
    <MilestoneList
      class="project-version"
      :data-source="versionList"
      @add-milestone-node="addMilestoneNode"
    />
    <el-tabs
      v-model="activeName"
      class="version-detail"
      @tab-click="handleClick"
    >
      <!--    相关的版本描述、部署地址、功能升级、问题修复、代码优化、功能模块人员任务记录，预测风险-->
      <el-tab-pane label="节点信息" name="1">
        <VersionDetail />
      </el-tab-pane>
      <!--    项目经理、产品经理、UI人员、研发人员、测试人员、维护人员、人员的更换记录-->
      <el-tab-pane label="人员配备" name="2">
        <div class="role-responsibilities-tab">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="项目经理" name="1">
              <el-table :data="personTableData" style="width: 100%">
                <el-table-column prop="personName" label="人员名称" />
                <el-table-column
                  prop="appointmentDate"
                  label="进项时间"
                  width="180"
                />
                <el-table-column prop="exitTime" label="出项时间" width="180" />
                <el-table-column prop="contact" label="联系方式" />
                <el-table-column prop="post" label="职位" />
                <el-table-column
                  prop="status"
                  label="状态"
                  width="80"
                ></el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item title="产品经理" name="2">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="fileName" label="文档名称" />
                <el-table-column
                  prop="updateTime"
                  label="上传时间"
                  width="180"
                />
                <el-table-column
                  prop="updaterName"
                  label="更新人"
                  width="250"
                />
                <el-table-column prop="version" label="版本" width="80">
                  <template #default="{ row }">
                    <el-tag type="primary">{{ row.version }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item title="UI设计" name="3">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="fileName" label="文档名称" />
                <el-table-column
                  prop="updateTime"
                  label="上传时间"
                  width="180"
                />
                <el-table-column
                  prop="updaterName"
                  label="更新人"
                  width="250"
                />
                <el-table-column prop="version" label="版本" width="80">
                  <template #default="{ row }">
                    <el-tag type="primary">{{ row.version }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item title="测试人员" name="4">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="fileName" label="文档名称" />
                <el-table-column
                  prop="updateTime"
                  label="上传时间"
                  width="180"
                />
                <el-table-column
                  prop="updaterName"
                  label="更新人"
                  width="250"
                />
                <el-table-column prop="version" label="版本" width="80">
                  <template #default="{ row }">
                    <el-tag type="primary">{{ row.version }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item title="维护人员" name="5">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="fileName" label="文档名称" />
                <el-table-column
                  prop="updateTime"
                  label="上传时间"
                  width="180"
                />
                <el-table-column
                  prop="updaterName"
                  label="更新人"
                  width="250"
                />
                <el-table-column prop="version" label="版本" width="80">
                  <template #default="{ row }">
                    <el-tag type="primary">{{ row.version }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-tab-pane>
      <!--    相关的版本资料、如需求原型图（评审记录），更新文档记录、高保真与ui切图(UI评审更新记录)、PRD文档以及文档更新记录-->
      <el-tab-pane label="相关资料" name="3">
        <div class="version-document-tab">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="需求原型文档上传记录" name="1">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="fileName" label="文档名称" />
                <el-table-column
                  prop="updateTime"
                  label="上传时间"
                  width="180"
                />
                <el-table-column
                  prop="updaterName"
                  label="更新人"
                  width="250"
                />
                <el-table-column prop="version" label="版本" width="80">
                  <template #default="{ row }">
                    <el-tag type="primary">{{ row.version }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item title="PRD文档上传记录" name="2">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="fileName" label="文档名称" />
                <el-table-column
                  prop="updateTime"
                  label="上传时间"
                  width="180"
                />
                <el-table-column
                  prop="updaterName"
                  label="更新人"
                  width="250"
                />
                <el-table-column prop="version" label="版本" width="80">
                  <template #default="{ row }">
                    <el-tag type="primary">{{ row.version }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item title="UI高保证" name="3">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="fileName" label="文档名称" />
                <el-table-column
                  prop="updateTime"
                  label="上传时间"
                  width="180"
                />
                <el-table-column
                  prop="updaterName"
                  label="更新人"
                  width="250"
                />
                <el-table-column prop="version" label="版本" width="80">
                  <template #default="{ row }">
                    <el-tag type="primary">{{ row.version }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item title="需求原型文档上传记录" name="4">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="fileName" label="文档名称" />
                <el-table-column
                  prop="updateTime"
                  label="上传时间"
                  width="180"
                />
                <el-table-column
                  prop="updaterName"
                  label="更新人"
                  width="250"
                />
                <el-table-column prop="version" label="版本" width="80">
                  <template #default="{ row }">
                    <el-tag type="primary">{{ row.version }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.mb-10 {
  margin-bottom: 10px;
}

.project-detail {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.project-info {
  box-sizing: border-box;
  width: 480px;
  height: 100%;
  padding: 10px;
  margin-right: 10px;
  border-radius: 6px;
  box-shadow: 0 0 10px 2px rgb(0 0 0 / 10%);
}

.project-version {
  box-sizing: border-box;
  width: 480px;
  height: 100%;
  padding: 10px;
  margin-right: 10px;
  border-radius: 6px;
  box-shadow: 0 0 10px 2px rgb(0 0 0 / 10%);
}

.version-detail {
  box-sizing: border-box;
  width: calc(100% - 980px);
  height: 100%;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 0 10px 2px rgb(0 0 0 / 10%);
}

.role-responsibilities-tab,
.version-document-tab {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

::v-deep {
  .el-tab-pane {
    width: 100%;
    height: 100%;
  }
}
</style>
